<template>
  <div class="title-container">
    <div class="title-left-container">
      <div class="left-body-container">
        <img
          class="left-body-icon"
          src="/static/img/park/general/sign-right.webp"
        />
        <div class="left-body-text">{{ title }}</div>
      </div>
      <div class="left-line"></div>
    </div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "TitleBar",
  props: {
    title: {
      type: String,
      default: ""
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.title-container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .title-left-container {
    display: flex;
    flex-direction: column;

    .left-body-container {
      overflow: hidden;
      position: relative;
      display: flex;

      .left-body-icon {
        position: absolute;
        bottom: 0;
        left: -0.25rem;
        width: 1.25rem;
        height: 1.25rem;
        transform: rotate(-45deg) translate(0, 40%);
      }

      .left-body-text {
        margin-left: 1.625rem;
        font-size: 0.875rem;
        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        line-height: 1rem;
        text-shadow: 0px 0px 0.1875rem rgba(39, 166, 255, 0.8);
      }
    }

    .left-line {
      width: 180%;
      height: 0.0625rem;
      margin-top: 0.25rem;
      margin-left: 1.625rem;
      background: linear-gradient(
        90deg,
        rgba(101, 174, 238, 0.8) 4.43%,
        rgba(101, 174, 238, 0) 103.16%
      );
      box-shadow: 0px 0px 4px 0px rgba(31, 132, 222, 0.3);
    }
  }
}
</style>
